<template>
  <div id="zb_app">
    <!-- 卡片视图区域 -->
    <el-card class="box-card">
      <!-- 面包屑 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/index/home' }">后台首页</el-breadcrumb-item>
        <el-breadcrumb-item>会员列表</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- form表单 -->
      <el-form style="margin-top:10px;" :inline="true">
        <!-- 添加会员 -->
        <el-form-item style="width:50%;">
          <el-button type="success" size="mini" @click="addUser = true">添加会员</el-button>
        </el-form-item>
        <!-- 搜索框 -->
        <el-form-item>
          <el-input placeholder="请输入搜索内容" size="mini" v-model="keyword"></el-input>
        </el-form-item>
        <!-- 下来菜单 根据会员等级进行搜索 -->
        <el-form-item>
          <el-select v-model="user_level_id" placeholder size="mini">
            <el-option
              v-for="item in zb_userLevel"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 搜索按钮 -->
        <el-form-item>
          <el-button type="info" size="mini" @click="getList">搜索</el-button>
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <el-table :data="zb_userList" border style="width: 100%">
        <el-table-column label="会员" width="250">
          <template slot-scope="scope">
            <div>
              <el-image :src="scope.row.avatar" style="width:50px; height:50px;" class="zb_img" />
              {{scope.row.username}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="user_level.name" label="会员等级" width="200"></el-table-column>
        <el-table-column prop="create_time" label="登陆时间" width="400"></el-table-column>
        <el-table-column prop="status" label="状态" width="200">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" v-if="scope.row.status==0">禁用</el-button>
            <el-button size="mini" type="success" v-else>普通</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="zb_edit(scope.row)">修改</el-button>
            <el-button type="text" size="small" @click="zb_del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagenum"
        :page-sizes="[3,6,9,12]"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totals"
      ></el-pagination>
    </el-card>
    <!-- 添加用户弹窗-->
    <el-dialog title="添加用户" :visible.sync="addUser">
      <el-form>
        <!-- 用户名 -->
        <el-form-item label="用户名" label-width="80px">
          <el-input placeholder="输入用户名" v-model="users.username" />
        </el-form-item>
        <!-- 密码 -->
        <el-form-item label="密码" label-width="80px">
          <el-input type="password" placeholder="输入用户密码" v-model="users.password" />
        </el-form-item>
        <!-- 昵称 -->
        <el-form-item label="昵称" label-width="80px">
          <el-input type="text" placeholder="输入昵称" v-model="users.nickname" />
        </el-form-item>
        <!-- 头像 -->
        <el-form-item label="头像" label-width="80px">
          <el-button icon="el-icon-plus" @click="sel_img = true" v-if="users.avatar=='' "></el-button>
          <el-image
            :src="users.avatar"
            v-else
            style="width:100px; height:100px; border-radius: 5px;"
            @click="sel_img=true"
          ></el-image>
        </el-form-item>
        <!-- 邮箱 -->
        <el-form-item label="邮箱" label-width="80px">
          <el-input placeholder="输入用户邮箱" v-model="users.email" />
        </el-form-item>
        <!-- 电话 -->
        <el-form-item label="电话" label-width="80px">
          <el-input placeholder="输入用户电话" v-model="users.phone" />
        </el-form-item>
        <!-- 会员等级 -->
        <el-form-item label="会员等级" label-width="80px">
          <el-select v-model="users.user_level_id" placeholder size="mini">
            <el-option
              v-for="item in zb_userLevel"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 状态 -->
        <el-form-item>
          <el-radio v-model="users.status" label="0" border>禁用</el-radio>
          <el-radio v-model="users.status" label="1" border>正常</el-radio>
        </el-form-item>
      </el-form>
      <!-- 是否添加 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="addUser = false">取 消</el-button>
        <el-button type="primary" @click="addUsers">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 修改弹窗 -->
    <el-dialog title="修改用户" :visible.sync="userEditShow">
      <el-form>
        <!-- 用户名 -->
        <el-form-item label="用户名" label-width="80px">
          <el-input placeholder="输入用户名" v-model="edits.username" />
        </el-form-item>
        <!-- 密码 -->
        <el-form-item label="密码" label-width="80px">
          <el-input type="password" placeholder="输入用户密码" v-model="edits.password" />
        </el-form-item>
        <!-- 昵称 -->
        <el-form-item label="昵称" label-width="80px">
          <el-input type="text" placeholder="输入昵称" v-model="edits.nickname" />
        </el-form-item>
        <!-- 头像 -->
        <el-form-item label="头像" label-width="80px">
          <el-button icon="el-icon-plus" @click="sel_img = true" v-if="edits.avatar=='' "></el-button>
          <el-image
            :src="edits.avatar"
            v-else
            style="width:100px; height:100px; border-radius: 5px;"
            @click="sel_img=true"
          ></el-image>
        </el-form-item>
        <!-- 邮箱 -->
        <el-form-item label="邮箱" label-width="80px">
          <el-input placeholder="输入用户邮箱" v-model="edits.email" />
        </el-form-item>
        <!-- 电话 -->
        <el-form-item label="电话" label-width="80px">
          <el-input placeholder="输入用户电话" v-model="edits.phone" />
        </el-form-item>
        <!-- 会员等级 -->
        <el-form-item label="会员等级" label-width="80px">
          <el-select v-model="edits.user_level_id" placeholder size="mini">
            <el-option
              v-for="item in zb_userLevel"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-radio v-model="edits.status" label="0" border>禁用</el-radio>
          <el-radio v-model="edits.status" label="1" border>正常</el-radio>
        </el-form-item>
      </el-form>
      <!-- 是否修改 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="canceUser">取 消</el-button>
        <el-button type="primary" @click="saveUser">确 定</el-button>
      </div>
    </el-dialog>
    <!--修改用户的基本信息-->
    <!-- 添加用户选择头像的弹框 -->
    <el-dialog title="选择头像" :visible.sync="sel_img" width="80%" @open="getImageClass">
      <el-container>
        <el-aside style="width:200px">
          <ul>
            <li
              v-for="(item,key) in zb_imageClass"
              :key="key"
              :class="{act:item.id==cid}"
              @click.left="changeLeft(item.id)"
            >
              <span>{{item.name}}</span>
              <span>{{item.images_count}}</span>
            </li>
          </ul>
        </el-aside>
        <el-main>
          <!-- 右侧图片区域 -->
          <ul class="zb_ul">
            <li v-for="(item,key) in zb_imgList" :key="key">
              <el-image :src="item.url" @click="zb_selectImg(item.url)" />
              <p>{{item.name}}</p>
            </li>
          </ul>
        </el-main>
      </el-container>
    </el-dialog>
  </div>
</template>

<script>
//引入bottstrap样式
import "@/assets/bootstrap.css";
export default {
  // 组件名称
  name: "",
  // 组件参数 接收来自父组件的数据
  props: [],
  // 局部注册的组件
  components: {},
  // 组件状态值
  data() {
    return {
      keyword: "", //搜索关键字
      zb_userList: [], //会员数据源
      zb_userLevel: [], //会员等级
      totals: 0, //总条数
      limit: 3, //每页条数
      pagenum: 1, //当前页
      user_level_id: "", //会员等级id
      addUser: false, // 添加用户的弹框状态值
      // 添加会员时保存的数据
      users: {
        username: "小彬彬彬", //用户名
        password: "12345679", //密码
        nickname: 7697612, //昵称
        email: "1009874422@qq.com", //邮箱
        phone: "15124669511", //手机
        avatar: "", //头像
        user_level_id: "", //会员等级
        status: "" //状态
      },
      userEditShow: false, //修改用户开关
      //修改会员用户信息
      edits: {
        id: 0,
        username: "", //用户名
        password: "", //密码
        nickname: "", //昵称
        email: "", //邮箱
        phone: "", //手机
        avatar: "", //头像
        user_level_id: "", //会员等级
        status: "" //状态
      },
      sel_img: false, //选择头像的弹框
      zb_imageClass: [], //侧边俩 相册分类 数据源
      zb_imgList: [], //图片列表数据
      cid: "" //相册分类的id
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    //获取数据
    getList() {
      this.$axios
        .get(
          `/admin/user/${this.pagenum}?limit=${this.limit}&keyword=${this.keyword}&user_level_id=${this.user_level_id}`
        )
        .then(res => {
          console.log(res);
          this.zb_userList = res.data.data.list; //赋值会员数据
          this.zb_userLevel = res.data.data.user_level; //赋值会员等级数据
          this.totals = res.data.data.totalCount; //赋值总条数
        });
    },
    // 监听分页条数
    handleSizeChange(limit) {
      this.limit = limit;
      this.getList();
    },
    //监听分页页数
    handleCurrentChange(pagenum) {
      this.pagenum = pagenum;
      this.getList();
    },
    //添加会员信息
    addUsers() {
      if (this.users.username == "" || this.users.password == "") {
        this.$message.error("用户名和密码不能为空");
        return false;
      }
      //请求接口，传递数据
      this.$axios.post("/admin/user", this.users).then(res => {
        console.log(res);
        if (res.data.msg == "ok") {
          //添加成功
          this.$message.success("添加成功");
          //关闭对话框
          this.addUser = false;
          // 获取列表的数据
          this.getList();
        } else {
          //添加失败
          this.$message.error("添加失败");
          return false;
        }
      });
    },
    //删除会员
    zb_del(id) {
      this.$confirm("你确定要删除用户吗？删除可就不能恢复了幺", "提示", {
        type: "warning",
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      })
        //确认删除
        .then(() => {
          //请求删除接口
          this.$axios.post(`/admin/user/${id}/delete`).then(res => {
            console.log(res);
            if (res.data.msg == "ok") {
              //删除成功
              this.$message.success("删除成功");
              //关闭窗口
              this.addUser = false;
              //调用
              this.getList();
            }
          });
        })
        //取消删除
        .catch(() => {
          this.$message("你已经取消删除用户");
        });
    },
    //修改
    zb_edit(row) {
      //打开修改弹框
      this.userEditShow = true;
      //把当前选中的用户的信息赋给edits
      this.edits = row;
    },
    //取消修改
    canceUser() {
      //关闭修改弹框
      this.userEditShow = false;
      this.getList();
    },
    //保存用户的信息
    saveUser() {
      console.log(this.edits);
      //为空判断
      if (this.edits.username == null || this.edits.password == null) {
        this.$message.error("邮箱或手机不能为空");
        return false;
      }
      //请求接口
      this.$axios
        .post(`/admin/user/${this.edits.id}`, {
          username: this.edits.username,
          password: this.edits.password,
          nickname: this.edits.nickname,
          email: this.edits.email,
          phone: this.edits.phone,
          avatar: this.edits.avatar,
          user_level_id: this.edits.user_level_id,
          status: this.edits.status
        })
        //成功
        .then(res => {
          console.log(res);
          if (res.data.msg == "ok") {
            //修改成功
            this.$message.success("修改成功");
            //控制编辑弹框的显示
            this.userEditShow = false;
            //刷新列表
            this.getList();
          }
        })
        //失败
        .catch(error => {
          console.log(error.response.data);
          return false;
        });
    },
    //获取图片相册列表
    getImageClass(flag = false) {
      this.$axios.get(`/admin/imageclass/1`).then(res => {
        console.log(res);
        this.zb_imageClass = res.data.data.list;
        this.cid = res.data.data.list[0].id;
        this.getImgList();
      });
    },
    //获取左侧图片数据
    getImgList() {
      this.$axios.get(`/admin/imageclass/${this.cid}/image/1`).then(res => {
        console.log(res);
        this.zb_imgList = res.data.data.list;
      });
    },
    //点击左侧菜单栏进行切换
    changeLeft(id) {
      this.cid = id; //改变id的值
      this.page = 1; //默认首页
      this.getImgList();
    },
    //选择头像的信息
    zb_selectImg(url) {
      //选择头像 赋值
      this.users.avatar = url;
      //修改头像 赋值
      this.edits.avatar = url;
      //关闭弹框
      this.sel_img = false;
    }
  },
  // 以下是生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 在实例初始化之后，组件属性计算之前，如data属性等
   */
  beforeCreate() {},
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {},
  /**
   * 在挂载开始之前被调用：相关的 render 函数首次被调用。
   */
  beforeMount() {},
  /**
   * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
   */
  mounted() {
    this.getList();
  },
  /**
   * 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
   * 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
   */
  beforeUpdate() {},
  /**
   * 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
   * 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
   */
  updated() {},
  /**
   * keep-alive 组件激活时调用。 仅针对keep-alive 组件有效
   */
  activated() {},
  /**
   * keep-alive 组件停用时调用。 仅针对keep-alive 组件有效
   */
  deactivated() {},
  /**
   * 实例销毁之前调用。在这一步，实例仍然完全可用。
   */
  beforeDestroy() {},
  /**
   * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
   * 所有的事件监听器会被移除，所有的子实例也会被销毁。
   */
  destroyed() {}
};
</script>

<style lang="scss" scoped>
//图片
.zb_img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
//图片区域
.zb_ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  li {
    width: 30%;
    height: 250px;
    .el-image {
      width: 200px;
      height: 180px;
      border-radius: 5px;
    }
    .button {
      position: relative;
      bottom: 20px;
    }
  }
}
// 侧边栏
.el-aside {
  min-height: 500px;
  // overflow: scroll;
  background: #f0f0f0;
  overflow: auto;
  //导航栏
  ul {
    width: 100%;
    li {
      padding: 10px 8px;
      border-bottom: 1px solid #dddddd;
      display: flex;
      justify-content: space-between;
      cursor: pointer;
    }
    li.act {
      background: #f0f9eb;
      color: #67c23a;
    }
  }
}
</style>
